<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>画板</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <canvas id="canvas"></canvas>
    <script>
        let canvas = document.getElementById('canvas')
        canvas.width = document.documentElement.clientWidth;
        canvas.height = document.documentElement.clientHeight;
        // 画线
        let ctx = canvas.getContext('2d');

        let painting = false

        ctx.fillStyle = 'black';
        ctx.strokeStyle = 'none';

        canvas.onmousedown = () => {
            painting = true
        }

        canvas.onmousemove = (e) => {
            if (painting === true) {
                // ctx.fillRect(e.clientX - 5, e.clientY - 5, 10, 10);
                // 画圆形
                ctx.beginPath();
                ctx.arc(e.clientX, e.clientY, 10, 0, 2 * Math.PI);
                ctx.stroke();
                ctx.fill();

            } else {
                // console.log('什么都不做');
            }
        }

        canvas.onmouseup = () => {
            painting = false;
        }
    </script>
</body>

</html>